<template>
  <div id="DeviceBox">
    <el-card>
      <el-card shadow="never">
        <div slot="header"  class="clearfix" v-if="crud.props.searchToggle">
          <!-- 搜索 -->
          <el-input v-model="query.name" clearable placeholder="输入设备名称" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <rrOperation />
        </div>
        <crudOperation :permission="permission" />
        <!--表单组件-->
        <el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
          <el-form ref="form" inline :model="form" :rules="rules" label-width="80px">
            <el-form-item label="设备名称" prop="dev_name">
              <el-input v-model="form.dev_name" style="width: 370px;" />
            </el-form-item>
            <el-form-item label="设备类型" prop="dev_type">
              <el-select v-model="form.dev_type" class="elInputS" placeholder="请选择设备类型">
                <el-option  v-for="(item, index) in deviceTypeCfg" :label="item.label" :value="item.id"  :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备型号" prop="dev_model_name">
              <el-select v-model="form.dev_model" class="elInputS" placeholder="请选择设备型号">
                <el-option  v-for="(item, index) in deviceFlag" :label="item.label" :value="item.id"  :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="IP地址" prop="dev_ip">
              <el-input v-model="form.dev_ip" class="elInputS" />
            </el-form-item>
            <el-form-item label="端口" prop="port">
              <el-input type="number" v-model="form.port" style="width: 80px;" />
              <span class="el-icon--right">
                <el-link type="primary" :underline="false">打开 FTP设置 <i class="el-icon--right el-icon-edit-outline"></i></el-link>
              </span>
            </el-form-item>
            <el-form-item label="备注" prop="port">
              <el-input v-model="form.remark" style="width: 370px;" />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="crud.cancelCU">取消</el-button>
            <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
          </div>
        </el-dialog>
        <!-- 列表区域 -->
        <el-table
          ref="table"
          v-loading="crud.loading"
          lazy
          :data="crud.data"
          border
          stripe
          @select="crud.selectChange"
          @select-all="crud.selectAllChange"
          @selection-change="crud.selectionChangeHandler"
          style="width: 100%;">
          <el-table-column :selectable="checkboxT" type="selection" width="55" />
          <el-table-column
            label="序号"
            type="index"
            width="60">
          </el-table-column>
          <!-- <el-table-column type="index" label="序号"></el-table-column> -->
          <el-table-column prop="dev_name" label="名称"></el-table-column>
          <el-table-column prop="dev_type" label="类型"></el-table-column>
          <el-table-column prop="dev_model_name" label="型号"></el-table-column>
          <el-table-column prop="dev_ip" label="IP地址">
            <template v-slot="scope">
              <el-link type="primary" :underline="false">{{scope.row.dev_ip + ':' + scope.row.port}} <i class="el-icon--right el-icon-view"></i></el-link>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column v-permission="['admin','device:edit','device:del']" label="操作" width="130px" align="center">
            <template slot-scope="scope">
              <udOperation
                :data="scope.row"
                :permission="permission"
                :disabled-dle="scope.row.id === 1"
                msg="确定删除吗,此操作不能撤销！"
              />
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
      </el-card>
    </el-card>
  </div>
</template>

<script>
import CRUD, { presenter, header, form, crud } from '@/components/Crud/crud'
import crudDevice from '@/api/system/device.js' // 引入当前栏目的后端api

// 引入已封装好的增删改查相关组件
import rrOperation from '@/components/Crud/RrOperation.vue' // 搜索查询组件
import crudOperation from '@/components/Crud/CrudOperation.vue' // 列表顶部功能区域组件
import pagination from '@/components/Crud/Pagination.vue' // 分页组件
import udOperation from '@/components/Crud/UD.operation' // 列表操作列组件

// 配置表单字段， 并设置字段初始值
const defaultForm = { id: null, dev_name: null, dev_type: '1', dev_model: '1', dev_model_name: null, dev_ip: null, port: 8050, remark: null }
export default {
  name: 'Device',
  components: { rrOperation, crudOperation, pagination, udOperation },
  cruds() { // 该方法，返回当前组件配置初始化后的实例对象
    return CRUD({ title: '设备列表', url: 'system/device', crudMethod: { ...crudDevice } })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      /* 设置页面权限 */
      permission: {
        add: ['admin', 'device::add'],
        edit: ['admin', 'device::edit'],
        del: ['admin', 'device::del']
      },
      // 表单验证规则
      rules: {},

      // 设备类型配置数组
      deviceTypeCfg: [
        { id: '1', label: 'nds视频服务器' }
      ],
      // 设备型号配置数组
      deviceFlag: [
        { id: '1', label: 'linux服务器' }
      ]
    }
  },
  created() {
    this.crud.optShow.download = false // 隐藏 导出按钮
  },
  methods: {
    checkboxT(row, rowIndex) {
      return row.id !== false
    },
    // 新增与编辑提交前的操作
    [CRUD.HOOK.afterToCU](crud, form) {
      console.log(form, 'beforSubmit')
    }
  }
}
</script>

<style lang="less">
  #DeviceBox .el-card__header {
    background-color: #fff;
  }
  .operator {
    float: right;
    display: inline-block;
    margin-left: 20px;
  }
</style>
